<template>
  <div class="configuration">
    <div class="container">
      <div class="container_top">
        <el-card class="box_card">
          <div class="left_icon">
            <img src="../assets/img/left.png" alt="" />
          </div>
          <div class="right_input">
            {{ input }}

            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
          </div>
        </el-card>
      </div>
      <div class="container_bottom">
        <div class="left_menu">
          <el-menu
            :default-active="activeIndex"
            @select="selectMenu"
            v-for="item in menuData"
            :key="item.id"
          >
            <el-menu-item :index="item.id">
              <!-- <span class="menu_icon"> -->
              <img :src="item.icon" alt="" class="menu_icon" />
              <!-- </span> -->
              <span slot="title">{{ item.label }}</span>
            </el-menu-item>
          </el-menu>
          <div class="menu_btn">
            <el-button type="primary" class="btn btn_1"
              >Save dashboard</el-button
            >
            <el-button type="primary" class="btn btn_2">Save As...</el-button>
          </div>
        </div>
        <div class="menu_content">
          <el-card shadow="never">
            <div class="content_box box1" style="margin-top: 30px">
              <el-descriptions title="通用设置" :column="1" :size="size" border>
                <el-descriptions-item>
                  <template slot="label">
                    <div>
                      <label for="">名称</label>
                    </div>
                  </template>
                  <div class="nameVal" style="">
                    {{ input }}
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <label for=""> 描述</label>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <div class="label_flex">
                      <label for=""> 标签</label>
                      <img
                        src="../assets/img/yangshi_icon_tongyong_info.png"
                        alt=""
                        class="label_img"
                      />
                    </div>
                  </template>
                  <div class="tagVal">add tags</div>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <label for=""> Folder</label>
                  </template>
                  <el-select v-model="selectVal1" value="beh" placeholder="beh">
                  </el-select>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <div class="label_flex">
                      <label for=""> Editable</label>
                      <img
                        src="../assets/img/yangshi_icon_tongyong_info.png"
                        alt=""
                        class="label_img"
                      />
                    </div>
                  </template>
                  <el-switch
                    v-model="switchVal1"
                    active-color="#e8873b"
                    inactive-color="#dee4ec"
                  >
                  </el-switch>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="content_box box2" style="margin-top: 30px">
              <el-descriptions
                title="Time Options"
                :column="1"
                :size="size"
                border
              >
                <el-descriptions-item>
                  <template slot="label">
                    <label for="">Timezone</label>
                  </template>
                  <el-select v-model="selectVal1" placeholder="Default">
                  </el-select>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <label for="">Auto-refresh</label>
                  </template>
                  <div class="labelVal">5s,10s,30s,1m,5m,15m,30m,1h,2h,1d</div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <label for="">Now delay now-</label>
                  </template>
                  <div style="color: #dee4ec">0m</div>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <label for="">Hide time picker</label>
                  </template>
                  <el-switch
                    v-model="switchVal2"
                    active-color="#e8873b"
                    inactive-color="#dee4ec"
                  >
                  </el-switch>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="content_box box3" style="margin-top: 30px">
              <el-descriptions title="看板参数" :column="1" :size="size" border>
                <el-descriptions-item>
                  <template slot="label">
                    <div class="label_flex">
                      <label for="">Graph Tooltip</label>
                      <img
                        src="../assets/img/yangshi_icon_tongyong_info.png"
                        alt=""
                        class="label_img"
                      />
                    </div>
                  </template>
                  <el-select v-model="selectVal2" placeholder="Default">
                  </el-select>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "configuration",
  data() {
    var menuData = [
      {
        id: 1,
        icon: require("../assets/img/配置管理.png"),
        label: "通用",
      },
      {
        id: 2,
        icon: require("../assets/img/duihuaqipao.png"),
        label: "注解",
      },
      {
        id: 3,
        icon: require("../assets/img/xitonghanshu.png"),
        label: "参数",
      },
      {
        id: 4,
        icon: require("../assets/img/lianjie.png"),
        label: "链接",
      },
      {
        id: 5,
        icon: require("../assets/img/banbengengxin.png"),
        label: "版本",
      },
      {
        id: 6,
        icon: require("../assets/img/quanxian.png"),
        label: "权限",
      },
      {
        id: 7,
        icon: require("../assets/img/json.png"),
        label: "JSON模板",
      },
    ];

    return {
      input: "hdfs策略配置",
      menuData,
      activeIndex: 1,
      switchVal1: true,
      switchVal2: false,

      selectVal1: "",
      selectVal2: "",
    };
  },
  methods: {
    selectMenu(val) {
      this.activeIndex = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin: auto;
  width: 100%;
  padding: 0px 50px;
  // min-height: 100vh;
  .container_top {
    height: 10%;
    .box_card {
      border-right: none;
      border-left: none;
      //   box-shadow: 0px 17px 5px -18px rgb(224, 222, 222);
      box-shadow: none;
      border-radius: 0;
      /deep/.el-card__body {
        width: 100%;
        display: flex;
        align-items: center;
        border-right: none;
        border-left: none;

        .left_icon {
          width: 40px;
          height: 40px;
          padding: 5px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        .right_input {
          margin-left: 15px;
          width: 50%;
          font-size: 16px;
          color: #000;
          font-weight: bolder;
          font-family: Source Han Sans CN !important;
        }
      }
    }
  }

  .container_bottom {
    display: flex;
    // height: 100vh;
    .left_menu {
      width: 300px;
      height: 100%;
      /deep/.el-menu-item:hover,
      .el-menu-item:focus {
        background-color: #f7f8fa;
        border-left: 2px solid #e8812b;
      }
      /deep/.el-menu-item.is-active {
        color: #000;
        background-color: #f7f8fa;
        border-left: 2px solid #e8812b;
      }
      .menu_btn {
        display: flex;
        flex-direction: column;
        margin-top: 30px;
        .btn {
          margin: 5px auto;
          width: 200px;
          height: 45px;
          border: 0;
          font-weight: bolder;
          font-family: Source Han Sans CN !important;
        }
        .btn_1 {
          background-color: #5ba660;
        }
        .btn_2 {
          color: #000;
          background-color: #edeff3;
          border: 1px solid #ccd2da;
        }
      }
      /deep/.el-menu {
        border-right: none;
        .menu_icon {
          width: 25px;
          height: 25px;
          margin-right: 10px;
        }
      }
    }
    .menu_content {
      width: 100%;
      height: 100%;
      background-color: #f7f8fa;
      /deep/.el-card {
        border-radius: 0;
        border: 0;
        background-color: #f7f8fa;
      }
      .content_box {
        margin: 0px 10px;
        .nameVal {
          color: #000;
          font-weight: bolder;
          font-family: Source Han Sans CN !important;
        }
        .tagVal {
          color: #c2cad2;
        }
        .label_img {
          width: 20px;
          height: 20px;
        }
        .labelVal {
          color: #000;
          font-family: Source Han Sans CN !important;
        }
        .label_flex {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        /deep/.el-switch__core {
          width: 40px !important;
        }
        /deep/ .el-descriptions__table {
        }
        /deep/.el-descriptions-row {
          border: 1px solid #dee4ec;
        }
        /deep/ .el-descriptions-item__cell {
          // border: none;
        }
        /deep/th.el-descriptions-item__cell.el-descriptions-item__label.is-bordered-label {
          background-color: #dee4ec;
          width: 150px;
          color: #000;
        }
      }
      .box1 {
        /deep/.el-descriptions__title {
          margin-top: -20px;
          margin-bottom: 20px;
          font-size: 20px;
        }
      }
      .box2 {
        /deep/th.el-descriptions-item__cell.el-descriptions-item__label.is-bordered-label {
          width: 200px;
        }
      }
      .box3 {
        /deep/th.el-descriptions-item__cell.el-descriptions-item__label.is-bordered-label {
          width: 250px;
        }
      }
    }
  }
}
</style>